{% extends 'project/layout.html' %}
{% load static %}
{% load issue %}
{% block title %}
项目管理
{% endblock%}

{% block css%}
<link rel="stylesheet" href="{% static 'plugin/md-master/css/editormd.css' %}">
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
<style>
  .my{
    display: flex;
  }
  .setting{
    margin-right: 40px;
    width: 30%;
  }
  .value{
    width: 50%;
  }
  .item{
    margin-bottom: 20px;
  }
  .issue-container{
      margin-top: 10px;
      padding: 10px 20px;
      border: 1px solid #cccccc;

  }
  .issue-container .issue-item{
      padding: 5px 2px;
      margin-bottom: 5px;
      border-bottom: 1px solid #999999;
  }
  .issue-container .issue-item .issue-content{
        font-size: 16px;
  }
  .issue-container .issue-item .issue-footer{
      margin-top: 4px;
      display: flex;
      font-size: 6px;
      justify-content: space-around;
  }
  .lianjie{
      display: flex;

  }
</style>

{% endblock %}
{% block content %}
  <div class="container-fluid my">
      <div class="panel panel-default setting">
         <div class="panel-heading">筛选</div>
          <!-- List group -->
          <div class="panel-body">
            <div class="item">
                <p>问题类型</p>
                <div>
                  {% for item in issues_type_filter %}
                  <label class="checkbox-inline">
                      {% if item.checked%}
                        <a href="{{item.url}}">
                            <input type="checkbox" checked='{{item.checked}}'   value="{{item.key}}"> {{item.value}}
                        </a>
                      {% else %}
                        <a href="{{item.url}}">
                            <input type="checkbox"  value="{{item.key}}"> {{item.value}}
                        </a>
                      {% endif %}
                  </label>
                 {% endfor %}
                </div>
            </div>
             <div class="item">
                <p>状态</p>
                <div>
                      {% for item in status_filter %}
                         <label class="checkbox-inline">
                            {% if item.checked%}
                                <a href="{{item.url}}">
                                    <input type="checkbox"  checked='{{item.checked}}' value="{{item.key}}">{{item.value}}
                                </a>

                            {% else %}
                             <a href="{{item.url}}">
                                 <input type="checkbox"   value="{{item.key}}">{{item.value}}
                             </a>

                            {% endif  %}
                        </label>
                      {% endfor %}

                </div>
            </div>
             <div class="item">
                <p>优先级</p>
                <div>
                  {% for item in priority_filter %}
                      <label class="checkbox-inline">
                        {% if item.checked%}
                            <input type="checkbox" checked='{{item.checked}}'  value="{{item.key}}">{{item.value}}
                        {% else %}
                          <input type="checkbox"   value="{{item.key}}">{{item.value}}
                        {% endif %}
                      </label>
                  {% endfor %}
                </div>
            </div>
             <div class="form-group">
                <label for="thename">指派者</label>
<!--                <input type="text" class="form-control" id="thename" placeholder="输入指派者" name="thename">-->
                <select id="assign-select" multiple style="width: 100%">
                    {% for item in assign_filter%}
                    {% if item.checked%}
                        <option selected value="{{item.url}}">{{item.value}}</option>
                    {% else %}
                        <option value="{{item.url}}">{{item.value}}</option>
                    {% endif %}
                    {% endfor%}
                </select>
              </div>
            <div class="form-group">
                <label for="follow">关注者</label>
                <input type="text" class="form-control" id="follow" placeholder="输入指派者" name="followname">
              </div>
          </div>
      </div>

      <div class="panel panel-warning value">
        <div class="panel-heading">问题</div>

        <!-- List group -->
        <div class="panel-body">
          <div class="title">
            <button type="button" class="btn btn-success"
                    data-toggle="modal" data-target="#myModal" id="newIssue" >新建问题</button>
            <button type="button" class="btn btn-info"
                     data-toggle="modal" data-target="#myModal2" id="invite"
                    >邀请成员</button>
          </div>
          <!--      问题列表      -->
          <div class="issue-container">
              {% for item in issuelist %}
              <div class="issue-item">
                  <div class="issue-content">
                      {% if item.get_priority_display == '高' %}
                        <span style="color: red">{{item.get_priority_display}}</span>
                      {% elif  item.get_priority_display == '中' %}
                        <span style="color: yellow">{{item.get_priority_display}}</span>
                      {% else %}
                        <span style="color: green">{{item.get_priority_display}}</span>
                      {% endif %}
                      <span>{% string_just item.id %}</span>
                      <a href="{% url 'web:issue_detail' project_id=request.tracer.project.id  issue_id=item.id %}">{{item.subject}}</a>
                  </div>
                  <div class="issue-footer">
                      <div>问题类型：{{item.issues_type.title}}</div>
                      <div> 问题状态:{{item.get_status_display}}</div>
                      <div>指派给:{{item.assign.username}}</div>
                      <div>创建者:{{item.creator.username}}</div>
                      <div>创建时间:{{item.latest_update_datetime}}</div>
                  </div>
              </div>
              {% endfor %}
          </div>
        </div>
      </div>
  </div>
  <!--  分页-->
  <nav aria-label="Page navigation" style="margin-left: 35%">
  <ul class="pagination">
    <!--  判断页面是否有上一页    -->
    {% if issuelist.has_previous %}
        <li >
          <a href="{% url 'web:issue' project_id=request.tracer.project.id %}?page={{ issuelist.previous_page_number }}" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
    {% else %}
       <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
    {% endif %}
    {% for item in issuelist.paginator.page_range %}
        <!--   判断是否时当前页码     -->
        {% if item == issuelist.number %}
            <li class="active"><a href="?page={{item}}">{{item}}</a></li>
        {% else %}
            <li ><a href="?page={{item}}">{{item}}</a></li>
        {% endif %}
    {% endfor %}

    {% if issuelist.has_next %}
        <li>

          <a href="{% url 'web:issue' project_id=request.tracer.project.id %}?page={{ issuelist.next_page_number }}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
    {% else %}
       <li class="disabled">
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
    {% endif %}

    <span style="display: inline-block;
                 height: 34px;
                 line-height: 34px;
                 margin-left: 10px; color: pink"
    >共{{ issuelist.paginator.num_pages }}页</span>
  </ul>


</nav>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog  modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新建问题</h4>
      </div>
      <div class="modal-body">
          <!--  新建问题表单      -->
            <form novalidate id="form" class="form-horizontal">
                {% csrf_token %}
                 <div class="form-group">
                        <label for="{{form.issues_type.id_for_label}}" class="col-sm-2 control-label">{{form.issues_type.label}}</label>
                        <div class="col-sm-10">
                          {{form.issues_type}}
                        </div>
                 </div>
                <div class="form-group">
                        <label for="{{form.subject.id_for_label}}" class="col-sm-2 control-label">{{form.subject.label}}</label>
                        <div class="col-sm-10">
                          {{form.subject}}
                        </div>
                </div>
                <div class="form-group">
                        <label for="{{form.module.id_for_label}}" class="col-sm-2 control-label">{{form.module.label}}</label>
                        <div class="col-sm-10">
                          {{form.module}}
                        </div>
                </div>
                <div class="form-group">
                        <label for="{{form.desc.id_for_label}}" class="col-sm-2 control-label">{{form.desc.label}}</label>
                        <div class="col-sm-10">
                          <div id="editor">
                              {{form.desc}}
                          </div>
                        </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-6">
                         <label for="{{form.status.id_for_label}}" class="col-sm-2 control-label">{{form.status.label}}</label>
                        <div class="col-sm-10">
                          {{form.status}}
                        </div>
                    </div>
                    <div class="col-md-6" style="padding: 0">
                         <label for="{{form.priority.id_for_label}}" class="col-sm-2 control-label">{{form.priority.label}}</label>
                        <div class="col-sm-10">
                          {{form.priority}}
                        </div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-6">
                         <label for="{{form.assign.id_for_label}}" class="col-sm-2 control-label">{{form.assign.label}}</label>
                        <div class="col-sm-10">
                          {{form.assign}}
                        </div>
                    </div>
                    <div class="col-md-6" style="padding: 0">
                         <label for="{{form.attention.id_for_label}}" class="col-sm-2 control-label">{{form.attention.label}}</label>
                        <div class="col-sm-10">
                          {{form.attention}}
                        </div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-6">
                         <label for="{{form.start_date.id_for_label}}" class="col-sm-2 control-label">{{form.start_date.label}}</label>
                        <div class="col-sm-10">
                          {{form.start_date}}
                        </div>
                    </div>
                    <div class="col-md-6" style="padding: 0">
                         <label for="{{form.end_date.id_for_label}}" class="col-sm-2 control-label">{{form.end_date.label}}</label>
                        <div class="col-sm-10">
                          {{form.end_date}}
                        </div>
                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-md-6">
                         <label for="{{form.mode.id_for_label}}" class="col-sm-2 control-label">{{form.mode.label}}</label>
                        <div class="col-sm-10">
                          {{form.mode}}
                        </div>
                    </div>
                    <div class="col-md-6" style="padding: 0">
                         <label for="{{form.parent.id_for_label}}" class="col-sm-2 control-label">{{form.parent.label}}</label>
                        <div class="col-sm-10">
                          {{form.parent}}
                        </div>
                    </div>
                </div>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="addBtn">添加</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog  modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel2">新建邀请</h4>
      </div>
      <div class="modal-body">
          <!--  新建邀约表单      -->
          <form id="invite-form">
              {% csrf_token%}
              {% for item in invite_form %}
                <div class="form-group">
                      <label for="{{item.id_for_label}}">{{item.label}}</label>
                            {{item}}
                      <span class="error-msg">{{item.errors.0}}</span>
                    </div>
              {% endfor%}
          </form>
          <input class="btn btn-default"  value="生成验证码" id="genterCode">
      </div>
      <div class="modal-footer lianjie">



                    <div class="input-group" style="width: 85%;margin-right: 10px;">
                      <div class="input-group-addon">邀请链接</div>
                      <input type="text" class="form-control" id="lianjieInput"   >
                    </div>
                  <button type="submit" class="btn btn-success" id="copylianjie">复制链接</button>

      </div>
    </div>
  </div>
</div>
{% endblock%}

{% block js %}
<script src="{% static 'plugin/md-master/editormd.js' %}"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/i18n/defaults-zh_CN.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/i18n/zh-CN.min.js"></script>
<script>
     //初始化编辑器为markdown编辑器
    function initEditor(){
        editormd('editor',{
            placeholder : ' 请输入内容',
            height :500,
            path:'{% static "plugin/md-master/lib/" %}',
            // imageUpload:false,
            // imageFormats : ['jpg','jpeg','png','gif'],
            imageUploadURL:'{% url "web:wiki_upload" project_id=request.tracer.project.id %}',
            imageUpload    : true,
            crossDomainUpload : false,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            // imageUploadURL : "./php/upload.php",
        })
    }
    //点击新建问题按钮
    function showIssue(){
        const newBtn=document.querySelector('#newIssue')

        newBtn.addEventListener('click',(e)=>{

            initEditor()
            $('#id_start_date,#id_end_date').datepicker({
                format : ' yyyy-mm-dd',
                startDate:'0',
                language:'zh-CN',
                autoClose:true
            })
        })

    }
    showIssue()
     // $('#myModal').on('show.bs.modal', function (e) {
     //      // do something...
     //     console.log('aaa')
     //     // initEditor()
     // })
     //提交问题的创建
    function subIssue() {
        let addBtn=document.querySelector('#addBtn')
        addBtn.addEventListener('click',async (e)=>{
            const form=document.querySelector('#form')
            const newData=new FormData(form)
            const res = await fetch('{% url "web:issue" project_id=request.tracer.project.id %}',{
                method:'POST',
                body:newData
            })
            const data = await res.json()
            if(data.code==200){
                alert('创建成功')
            }else{
                alert(data.error)
            }
        })
    }
    subIssue()
    //初始化select2 样式
    function  initSelect(){
        $('#assign-select').select2().on('select2:select',function (e){
            //选中时触发
            location.href=e.params.data.id

        }).on('select2:unselect',(e)=>{
            //移除时触发
            // console.log(2)
            location.href=e.params.data.id
        })
    }
    initSelect()
     //生成验证码
     function genterCode() {
         const codeBtn=document.querySelector('#genterCode')
         codeBtn.addEventListener('click',async (e)=>{
             const  form=document.querySelector('#invite-form')
             const formData=new FormData(form)
             const res=await fetch('{% url "web:issue_invite" project_id=request.tracer.project.id %}',{
                 body:formData,
                 method :'POST'
             })
             const data=await res.json()
             console.log(data)
             if(data.code==200){
                 document.querySelector('#lianjieInput').value=data.data
             }

         })
     }
     genterCode()
     //复制链接
     function copyLianjie(){
        const copyBtn=document.querySelector('#copylianjie')
        copyBtn.addEventListener('click',(e)=>{
            document.querySelector('#lianjieInput').select()
            document.execCommand('Copy')
            alert('复制成功！')
        })
     }
     copyLianjie()
</script>
{% endblock%}